import React ,{ Component,Fragment} from 'react'
import logo from './logo.png'
import { Menu,Icon } from 'antd';
// import { MailOutlined, Icon } from '@ant-design/icons';
import './style.css'
export default class AppHeader extends Component {
    constructor(props){
     super(props);
     this.state = {
         list:[{
             id:1,
             type:'mail',
             title:' VOA慢速英语'
         },{
            id:2,
            type:'mail',
            title:' VOA慢速英语'
        },{
            id:3,
            type:'mail',
            title:' VOA慢速英语'
        },{
            id:4,
            type:'mail',
            title:' VOA慢速英语'
        },{
            id:5,
            type:'mail',
            title:' VOA慢速英语'
        },{
            id:6,
            type:'mail',
            title:' VOA慢速英语'
        },]
     }
    }
    getMenuItems(){
      return  this.state.list.map(item => {
       return ( <Menu.Item key={item.id}>
              {/* <Icon type={item.type}/> */}
              {item.title}
             </Menu.Item>)
        })
    }
    render(){
        return (
            <Fragment>
           <img src={logo} className='app-header-logo' />
           <Menu  mode="horizontal">
           {this.getMenuItems()}
           </Menu>
           </Fragment>
        )
    }
}